<script setup lang="ts">
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import { queryElderList } from '@/api/file-management/file';
  import { useRouter } from 'vue-router';
  import renderDictTag from '@/components/dict-tag/renderTag';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import { queryInstInfrastructure } from '@/api/organization/nursing-home';

  const router = useRouter();

  const serviceNameRenderer = ({ record }: any) => {
    return record.serviceStaff?.map((e: any) => e.serviceStaffName).join(',');
  };

  const renderGender = ({ record }: any) => {
    return renderDictTag('Gender', record.gender);
  };

  const renderStatus = ({ record }: any) => {
    return renderDictTag('ElderStatus', record.status);
  };

  const columns = [
    {
      title: '长者ID',
      dataIndex: 'elderId',
    },
    {
      title: '长者姓名',
      dataIndex: 'elderName',
    },
    {
      title: '长者性别',
      dataIndex: 'gender',
      render: renderGender,
    },
    {
      title: '长者状态',
      dataIndex: 'status',
      render: renderStatus,
    },
    {
      title: '所在院区',
      dataIndex: 'branchName',
    },
    {
      title: '所在建筑',
      dataIndex: 'buildingName',
    },
    {
      title: '房间号',
      dataIndex: 'roomNo',
    },
    {
      title: '床位号',
      dataIndex: 'bedNo',
    },
    {
      title: '护理人员',
      dataIndex: 'serviceStaff',
      render: serviceNameRenderer,
    },
    {
      title: '操作',
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
    },
  ];

  const page = usePageTable({
    searchForm: {
      state: {
        branchId: '',
        buildingId: '',
        roomNo: '',
        status: '',
        bedNo: '',
        elderName: '',
        serviceStaffName: '',
      },
    },
    table: {
      apiFun: queryElderList,
      columns,
    },
  });

  const showDetail = (record: any) => {
    router.push({
      name: 'FileDetail',
      query: {
        id: record.elderId,
      },
    });
  };

  const onCreate = () => {
    router.push({
      name: 'ElderCreate',
    });
  };

  const branchSelect = useSelectOption({
    leader: true,
    name: '所在院区',
    apiFun: queryInstInfrastructure,
    transformDataFun(data) {
      return data.branches;
    },
    fieldNames: {
      label: 'branchName',
      value: 'branchId',
      extra: 'buildings',
    },
    getValue() {
      return page.form?.state.branchId || '';
    },
    enhanceExtraData: true,
  });

  const buildingSelect = useSelectOption({
    immediate: false,
    name: '所在建筑',
    getValue() {
      return page.form?.state.buildingId || '';
    },
    apiFun: (id, extra) => {
      return Promise.resolve(extra || []);
    },
    enhanceExtraData: true,
    fieldNames: {
      label: 'buildingName',
      value: 'buildingId',
      extra: 'floors',
    },
    onChange(e) {
      if (page.form) {
        // @ts-ignore
        page.form.state.buildingId = e;
      }
    },
    upstream: branchSelect,
  });
</script>

<template>
  <TableLayout v-bind="page.bindProps" @create="onCreate">
    <template #searchForm="{ state }">
      <a-form-item field="branchId" label="所在院区">
        <a-select
          v-model="state.branchId"
          allow-clear
          v-bind="branchSelect.bindProps"
        />
      </a-form-item>

      <a-form-item field="buildingId" label="所在建筑">
        <a-select
          v-model="state.buildingId"
          allow-clear
          v-bind="buildingSelect.bindProps"
        />
      </a-form-item>

      <a-form-item field="roomNo" label="房间号">
        <a-input
          v-model="state.roomNo"
          placeholder="请输入房间号"
          allow-clear
        />
      </a-form-item>

      <a-form-item field="elderName" label="长者姓名">
        <a-input
          v-model="state.elderName"
          placeholder="请输入长者姓名"
          allow-clear
        />
      </a-form-item>

      <a-form-item field="status" label="长者状态">
        <dict-select
          v-model="state.status"
          type="ElderStatus"
          placeholder="请选择长者状态"
          allow-clear
        />
      </a-form-item>

      <a-form-item field="serviceStaffName" label="护理员">
        <a-input
          v-model="state.serviceStaffName"
          placeholder="请输入护理员姓名"
          allow-clear
        />
      </a-form-item>
    </template>

    <template #action="{ record }">
      <a-space>
        <ae-button purpose="view" @click="showDetail(record)"> 详情 </ae-button>
      </a-space>
    </template>
  </TableLayout>
</template>

<style lang="less" scoped></style>
